<template>
	<view class="container">
		<!-- 提现金额区域 -->
		<view class="withdraw-section">
			<view class="section-title">提现金额</view>
			<view class="amount-input-wrap">
				<text class="currency-symbol">¥</text>
				<input 
					class="amount-input" 
					type="digit" 
					v-model="amount" 
					placeholder="0.00"
					@input="handleInput"
				/>
			</view>
			<view class="balance-info">
				<text>可提现余额: ¥{{availableBalance | formatMoney}}</text>
				<text class="all-withdraw" @click="withdrawAll">全部提现</text>
			</view>
		</view>
		<!-- 提现方式提示 -->
		<view class="withdraw-method-info">
			<view class="method-item">
				<view class="method-icon wechat-icon">
					<u-icon name="weixin-fill" size="40" color="#07C160"></u-icon>
				</view>
				<view class="method-info">
					<view class="method-name">微信提现</view>
					<view class="method-desc">提现到微信零钱</view>
				</view>
			</view>
		</view>
		<!-- 提现说明 -->
		<view class="withdraw-notice">
			<view class="notice-title">提现说明</view>
			<view class="notice-item">1. 提现金额最低1元起</view>
			<view class="notice-item">2. 提现申请将在1-3个工作日内处理完成</view>
			<view class="notice-item">3. 如遇节假日，处理时间可能会延长</view>
			<view class="notice-item">4. 提现手续费为提现金额的0.6%</view>
		</view>
		<!-- 底部提交按钮 -->
		<view class="bottom-btn-wrap">
			<button 
				class="withdraw-submit-btn" 
				:disabled="!canSubmit" 
				:class="{'btn-disabled': !canSubmit}"
				@click="submitWithdraw"
			>
				确认提现
			</button>
		</view>
	</view>
</template>
<script>
	import wxMixins from '@/common/wx.js'
	export default {
		mixins: [wxMixins],
		data() {
			return {
				amount: '', // 提现金额
				availableBalance: 0.00, // 可提现余额
				// 只保留微信提现
				minWithdraw: 1.00, // 最低提现金额
				canSubmit: false // 是否可以提交
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters["common/getUserInfo"]
			}
		},
		filters: {
			formatMoney(val) {
				return val ? Number(val).toFixed(2) : '0.00'
			}
		},
		async onLoad(opt) {
			if (opt.code) {
				await this.request("get", "/order/wxcode", {
					code: opt.code
				})
			}
			// 获取账户余额信息
			this.getUserInfo();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			getUserInfo() {
				this.request("get", "/order/accountInfo").then(async res => {
					this.$store.commit("common/setUserInfo", res.data || {})
					this.availableBalance = this.userInfo.totalAmout || 0;
					if (!this.userInfo.wxopenid) {
						// TODO 跳转微信获取code
						let url = await this.getAuthorizeUrl('snsapi_base')
						location.href = url
					}
				})
			},
			// 处理输入并限制为数字且最多两位小数
			handleInput(e) {
				// 获取输入值
				let value = e.target.value;
				
				// 只允许数字和小数点
				value = value.replace(/[^\d.]/g, '');
				
				// 保证只有一个小数点
				if (value.split('.').length > 2) {
					value = value.replace(/\.+/g, '.');
				}
				
				// 限制小数点后只能有两位
				if (value.indexOf('.') !== -1) {
					value = value.substring(0, value.indexOf('.') + 3);
				}
				
				// 更新输入值
				this.amount = value;
				
				// 检查提现金额是否有效
				this.checkAmount();
			},
			
			// 处理输入并限制为数字且最多两位小数
			handleInput(e) {
				// 获取输入值
				let value = e.target.value;
				
				// 只允许数字和小数点
				value = value.replace(/[^\d.]/g, '');
				
				// 保证只有一个小数点
				if (value.split('.').length > 2) {
					value = value.replace(/\.+/g, '.');
				}
				
				// 限制小数点后只能有两位
				if (value.indexOf('.') !== -1) {
					value = value.substring(0, value.indexOf('.') + 3);
				}
				
				// 更新输入值
				this.amount = value;
				
				// 检查提现金额是否有效
				this.checkAmount();
			},
			
			// 检查提现金额是否有效
			checkAmount() {
				const amountNum = parseFloat(this.amount);
				if (!isNaN(amountNum) && amountNum >= this.minWithdraw && amountNum <= this.availableBalance) {
					this.canSubmit = true;
				} else {
					this.canSubmit = false;
					// 当输入有效数字但小于最低提现金额时，给予提示
					if (!isNaN(amountNum) && amountNum > 0 && amountNum < this.minWithdraw) {
						uni.showToast({
							title: `提现金额最低${this.minWithdraw}元`,
							icon: 'none',
							duration: 2000
						});
					}
				}
			},
			// 全部提现
			withdrawAll() {
				// 转为字符串并保留两位小数
				this.amount = Number(this.availableBalance).toFixed(2);
				this.checkAmount();
			},
			// 提交提现申请
			submitWithdraw() {
				const that = this;
				if (!this.canSubmit) return;
				const amountNum = parseFloat(this.amount);
				// 格式化金额为两位小数
				const formattedAmount = Number(amountNum).toFixed(2);
				
				if (isNaN(amountNum) || amountNum < this.minWithdraw) {
					uni.showToast({
						title: `提现金额最低${this.minWithdraw}元`,
						icon: 'none'
					});
					return;
				}
				if (Number(amountNum) > Number(this.availableBalance)) {
					uni.showToast({
						title: '提现金额不能大于可提现余额',
						icon: 'none'
					});
					return;
				}
				// 显示加载中
				uni.showLoading({
					title: '提交中...'
				});
				this.request("post", "/order/withdrawMoney", {
					amount: formattedAmount
				}).then(res => {
					uni.hideLoading();
					// 提交成功后显示结果
					uni.showModal({
						title: '提现申请已提交',
						content: `您的${formattedAmount}元提现申请已提交，预计1-3个工作日内到账`,
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								// 返回上一页
								uni.navigateBack();
							}
						}
					});
				}).catch(e => {
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: calc(100vh - var(--window-bottom) - var(--window-top));
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}
	
	/* 提现金额区域样式 */
	.withdraw-section {
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
	}
	
	.section-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	
	.amount-input-wrap {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.currency-symbol {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-right: 10rpx;
	}
	
	.amount-input {
		flex: 1;
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}
	
	.balance-info {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
	}
	
	.all-withdraw {
		color: rgb(255, 59, 67);
	}
	
	/* 提现方式提示样式 */
	.withdraw-method-info {
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
	}
	
	.method-item {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
	}
	
	.method-item:last-child {
		border-bottom: none;
	}
	
	.method-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		overflow: hidden;
	}
	
	.method-icon image {
		width: 60rpx;
		height: 60rpx;
	}
	
	.method-info {
		flex: 1;
	}
	
	.method-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 6rpx;
	}
	
	.method-desc {
		font-size: 24rpx;
		color: #999;
	}
	
	/* 提现说明样式 */
	.withdraw-notice {
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
	}
	
	.notice-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	
	.notice-item {
		font-size: 24rpx;
		color: #999;
		line-height: 1.8;
	}
	
	/* 底部按钮样式 */
	.bottom-btn-wrap {
		box-sizing: border-box;
		padding: 30rpx;
	}
	
	.withdraw-submit-btn {
		background-color: rgb(255, 59, 67);
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		width: 100%;
		text-align: center;
		&::after{
			border: none;
		}
	}
	
	.btn-disabled {
		background-color: #ccc;
		color: #fff;
		border: 2rpx solid #999;
	}
</style>